<script setup lang="ts">
import {QIcon, QThemeToggle, useDebounce,QSearch} from "qyani-components";
import router from "../route";
import { useBookSearchStore } from "../store/useBookSearchStore";

defineOptions({
  name: 'Header'
});
const bookSearchStore = useBookSearchStore();
const debounceSearchBook  = useDebounce(bookSearchStore.searchBook,100);
</script>

<template>
  <div class="header-container  container-align-center bg-card padding-24rem">
    <router-link to="/" class="link-primary hidden-768">
      <h3>三味书屋</h3>
    </router-link>
    <div class="container gap-fourth">
      <div class="header-search">
        <QSearch  @click="router.push('/book-search')"    
          @change="(value)=>bookSearchStore.setSearchKey(value)"
          @search="()=>debounceSearchBook()"
        />
      </div>
      <div class="container gap-fourth">
        <router-link to="/" class="link-primary container gap-fourth ">
          <QIcon icon="House" size="16" />
          <h4 class="hidden-768">首页</h4>
        </router-link>
        <router-link to="/book-shelf" class="link-primary container gap-fourth ">
          <QIcon icon="Copy" size="16" />
          <h4 class="hidden-768">书架</h4>
        </router-link>
        <router-link to="/history" class="link-primary container gap-fourth ">
          <QIcon icon="History" size="16" />
           <h4 class="hidden-768">历史记录</h4>
        </router-link>
        <router-link to="/personal-center" class="link-primary container gap-fourth ">
          <QIcon icon="User" size="16" />
           <h4 class="hidden-768"> 个人中心</h4>
        </router-link>
      </div>
      <QThemeToggle :size="24"/>
    </div>
  </div>
</template>

<style scoped lang="css">

</style>